<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="close"
    @ok="handleSubmit"
    :confirmLoading="isSubmiting"
    title="终止合同"
  >
    <a-form :form="form">
      <a-form-item label="退出原因">
        <a-select
          v-decorator="['StopReason', { rules: [{ required: true, message: '请选择退出原因' }] }]"
          :options="options"
          placeholder="请选择退出原因"
        >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { endContract } from '@/api/followUpManagement'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      isSubmiting: false,
      form: this.$form.createForm(this, { name: 'endContract' }),
      options: [
        { value: '退出实物退出资格', label: '退出实物退出资格' },
        { value: '退出实物转补贴', label: '退出实物转补贴' },
        { value: '退出实物保留资格', label: '退出实物保留资格' },
        { value: '其他', label: '其他' }
      ]
    }
  },
  methods: {
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
            this.isSubmiting = true
            const { StopReason } = values
            endContract({
                id: this.data.ID,
                StopReason,
                userId: this.$store.getters.userid
            }).then(res => {
                this.$message.success('合同终止成功')
                this.close()
                this.$emit('success')
            }).finally(() => {
                this.isSubmiting = false
            })
        }
      })
    },
    close () {
      this.form.resetFields()
      this.$emit('update:visible', false)
      this.$emit('update:data', {})
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="
          less"
          scoped>
</style>
        </a-select></a-form-item></a-form></a-modal></template>
